<template>
  <div class="api-coverage-container">
    <!-- API测试覆盖率卡片 -->
    <div class="api-coverage-chart coverage-card">
      <h3 class="chart-title">API测试覆盖率</h3>
      <div class="chart-content">
        <div class="chart-wrapper">
          <canvas ref="coverageChartCanvas"></canvas>
          <div class="chart-center">
            <div class="coverage-value">{{ apiCoverage }}%</div>
            <div class="coverage-label">覆盖率</div>
          </div>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <div class="legend-color covered"></div>
            <span class="legend-text">已覆盖 ({{ coveredApis }})</span>
          </div>
          <div class="legend-item">
            <div class="legend-color uncovered"></div>
            <span class="legend-text">未覆盖 ({{ uncoveredApis }})</span>
          </div>
        </div>
        <div class="chart-details">
          <div class="detail-row">
            <span class="detail-label">总API数量:</span>
            <span class="detail-value">{{ totalApis }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">已测试API:</span>
            <span class="detail-value covered-text">{{ coveredApis }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">未测试API:</span>
            <span class="detail-value uncovered-text">{{ uncoveredApis }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- API测试通过率卡片 -->
    <div class="api-coverage-chart pass-rate-card">
      <h3 class="chart-title">API测试通过率</h3>
      <div class="chart-content">
        <div class="chart-wrapper">
          <canvas ref="passRateChartCanvas"></canvas>
          <div class="chart-center">
            <div class="coverage-value">{{ passRate }}%</div>
            <div class="coverage-label">通过率</div>
          </div>
        </div>
        <div class="chart-legend">
          <div class="legend-item">
            <div class="legend-color passed"></div>
            <span class="legend-text">通过 ({{ passedApis }})</span>
          </div>
          <div class="legend-item">
            <div class="legend-color failed"></div>
            <span class="legend-text">失败 ({{ failedApis }})</span>
          </div>
        </div>
        <div class="chart-details">
          <div class="detail-row">
            <span class="detail-label">已测试API:</span>
            <span class="detail-value">{{ coveredApis }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">测试通过:</span>
            <span class="detail-value passed-text">{{ passedApis }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">测试失败:</span>
            <span class="detail-value failed-text">{{ failedApis }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables)

export default {
  name: 'ApiCoverageChart',
  props: {
    coverage: {
      type: Number,
      default: 85
    },
    totalApiCount: {
      type: Number,
      default: 150
    },
    testPassRate: {
      type: Number,
      default: 92
    }
  },
  setup(props) {
    const coverageChartCanvas = ref(null)
    const passRateChartCanvas = ref(null)
    let coverageChartInstance = null
    let passRateChartInstance = null

    const apiCoverage = computed(() => props.coverage)
    const totalApis = computed(() => props.totalApiCount)
    const passRate = computed(() => props.testPassRate)
    const coveredApis = computed(() => Math.round(totalApis.value * apiCoverage.value / 100))
    const uncoveredApis = computed(() => totalApis.value - coveredApis.value)
    const passedApis = computed(() => Math.round(coveredApis.value * passRate.value / 100))
    const failedApis = computed(() => coveredApis.value - passedApis.value)

    // 创建覆盖率图表
    const createCoverageChart = () => {
      if (coverageChartInstance) {
        coverageChartInstance.destroy()
      }

      const ctx = coverageChartCanvas.value.getContext('2d')
      
      // 创建渐变色
      const gradient1 = ctx.createLinearGradient(0, 0, 0, 300)
      gradient1.addColorStop(0, '#3b82f6')
      gradient1.addColorStop(1, '#60a5fa')
      
      const gradient2 = ctx.createLinearGradient(0, 0, 0, 300)
      gradient2.addColorStop(0, '#e5e7eb')
      gradient2.addColorStop(1, '#f3f4f6')

      coverageChartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['已覆盖', '未覆盖'],
          datasets: [{
            data: [apiCoverage.value, 100 - apiCoverage.value],
            backgroundColor: [gradient1, gradient2],
            borderWidth: 0,
            cutout: '75%',
            rotation: -90,
            circumference: 360
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              titleColor: 'white',
              bodyColor: 'white',
              borderColor: '#3b82f6',
              borderWidth: 1,
              cornerRadius: 8,
              displayColors: false,
              callbacks: {
                label: function(context) {
                  const label = context.label
                  const value = context.parsed
                  const count = label === '已覆盖' ? coveredApis.value : uncoveredApis.value
                  return `${label}: ${value}% (${count} APIs)`
                }
              }
            }
          },
          animation: {
            animateRotate: true,
            animateScale: true,
            duration: 1500,
            easing: 'easeInOutQuart'
          }
        }
      })
    }

    // 创建通过率图表
    const createPassRateChart = () => {
      if (passRateChartInstance) {
        passRateChartInstance.destroy()
      }

      const ctx = passRateChartCanvas.value.getContext('2d')
      
      // 创建渐变色
      const gradient1 = ctx.createLinearGradient(0, 0, 0, 300)
      gradient1.addColorStop(0, '#10b981')
      gradient1.addColorStop(1, '#34d399')
      
      const gradient2 = ctx.createLinearGradient(0, 0, 0, 300)
      gradient2.addColorStop(0, '#ef4444')
      gradient2.addColorStop(1, '#f87171')

      passRateChartInstance = new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['通过', '失败'],
          datasets: [{
            data: [passRate.value, 100 - passRate.value],
            backgroundColor: [gradient1, gradient2],
            borderWidth: 0,
            cutout: '75%',
            rotation: -90,
            circumference: 360
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              enabled: true,
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              titleColor: 'white',
              bodyColor: 'white',
              borderColor: '#10b981',
              borderWidth: 1,
              cornerRadius: 8,
              displayColors: false,
              callbacks: {
                label: function(context) {
                  const label = context.label
                  const value = context.parsed
                  const count = label === '通过' ? passedApis.value : failedApis.value
                  return `${label}: ${value}% (${count} APIs)`
                }
              }
            }
          },
          animation: {
            animateRotate: true,
            animateScale: true,
            duration: 1500,
            easing: 'easeInOutQuart'
          }
        }
      })
    }

    onMounted(() => {
      createCoverageChart()
      createPassRateChart()
    })

    return {
      coverageChartCanvas,
      passRateChartCanvas,
      apiCoverage,
      totalApis,
      passRate,
      coveredApis,
      uncoveredApis,
      passedApis,
      failedApis
    }
  }
}
</script>

<style scoped>
/* 容器样式 - 增加底部间距避免重叠 */
.api-coverage-container {
  display: flex;
  gap: 24px;
  width: 100%;
  margin-bottom: 24px;
  padding-bottom: 16px;
}

/* 共享卡片样式 */
.api-coverage-chart {
  flex: 1;
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.api-coverage-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 卡片特定样式 */
.coverage-card {
  border-top: 3px solid #3b82f6;
}

.pass-rate-card {
  border-top: 3px solid #10b981;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 20px;
  text-align: center;
}

.chart-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.chart-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
}

.chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.coverage-value {
  font-size: 32px;
  font-weight: 700;
  color: #4f46e5;
  line-height: 1;
  margin-bottom: 4px;
}

/* 通过率卡片特定颜色 */
.pass-rate-card .coverage-value {
  color: #10b981;
}

.coverage-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.chart-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.covered {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.legend-color.uncovered {
  background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
}

.legend-color.passed {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.legend-color.failed {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
}

.legend-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.chart-details {
  width: 100%;
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #f3f4f6;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.detail-value {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.covered-text {
  color: #3b82f6;
}

.uncovered-text {
  color: #ef4444;
}

.passed-text {
  color: #10b981;
}

.failed-text {
  color: #ef4444;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .api-coverage-container {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .api-coverage-chart {
    padding: 16px;
  }
  
  .chart-wrapper {
    width: 160px;
    height: 160px;
  }
  
  .coverage-value {
    font-size: 24px;
  }
  
  .chart-legend {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .api-coverage-chart {
    padding: 12px;
  }
  
  .chart-title {
    font-size: 16px;
    margin-bottom: 16px;
  }
  
  .chart-content {
    gap: 16px;
  }
  
  .chart-wrapper {
    width: 140px;
    height: 140px;
  }
  
  .coverage-value {
    font-size: 20px;
  }
}
</style>